<!--
 * @Author: your name
 * @Date: 2021-04-02 20:35:39
 * @LastEditTime: 2021-04-10 17:33:25
 * @LastEditors: Please set LastEditors
 * @Description: 药企资讯卡片
 * @FilePath: /medicine-web/src/views/realinfo/detail/index.vue
-->
<template>
  <div class="realinfo-card-container">
    <customBtn :btnStr="'数据统计'" @handClick="handleStatistics"></customBtn>
    <table border="1" cellpadding="0" cellspacing="0" width="100%" class="table-inner">
      <tr>
        <td class="title" colspan="3">国内</td>
        <td class="title" colspan="3">国外</td>
      </tr>
      <tr>
        <td>病毒种类</td>
        <td>病毒名称</td>
        <td>公司</td>
        <td>病毒种类</td>
        <td>病毒名称</td>
        <td>公司</td>
      </tr>
      <tr>
        <td rowspan="12">腺病毒</td>
        <td rowspan="2">H101、H103</td>
        <td rowspan="2">上海三维生物技术有限公司</td>
        <td rowspan="10">腺病毒</td>
        <td>DNX-2401</td>
        <td>DNAtrix, Inc</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td>ONCOS-102</td>
        <td>Targovax Oy </td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <td rowspan="2">KH901</td>
        <td rowspan="2">成都康弘生物技术有限公司</td>
        <!-- <td></td> -->
        <td>Telomelysin (OBP-301)</td>
        <td>Oncolys BioPharma Inc</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td>CG0070</td>
        <td>Cold Genesys, Inc.</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <td rowspan="4">ADV-TK</td>
        <td rowspan="2">深圳市天达康基因工程有限公司</td>
        <!-- <td></td> -->
        <td>VCN-01</td>
        <td>VCN Biosciences, S.L.</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td>Onyx-015</td>
        <td>Onyx Pharmacceuticals</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td rowspan="2">达康生物技术有限公司</td>
        <!-- <td></td> -->
        <td>ICOVIR5</td>
        <td>Institut Català d'Oncologia</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td>Enadenotucirev(Colo-Adi）</td>
        <td>PsiOxus Therapeutics Ltd</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <td rowspan="2">EDS01</td>
        <td rowspan="2">成都恩多施生物工程技术有限公司</td>
        <!-- <td></td> -->
        <td>MG1-MAGEA3</td>
        <td>Turnstone Biologics, Inc.</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td>ProstAtak </td>
        <td>Advantagene, Inc.</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <td rowspan="2">E10A</td>
        <td rowspan="2">广州Double Bioproducts Co., Ltd</td>
        <td rowspan="4">单纯疱疹病毒</td>
        <td>T-VEC</td>
        <td>Amgen</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td>HF10</td>
        <td>Takara Bio Inc.</td>
      </tr>
      <tr>
        <td rowspan="8">单纯疱疹病毒</td>
        <td rowspan="2">T3011</td>
        <td rowspan="2">深圳市亦诺微医药科技有限公司</td>
        <!-- <td></td> -->
        <td>HSV1716</td>
        <td>Timothy Cripe; Pediatric Brain Tumor Consortium</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td>G207</td>
        <td>Medigene</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <td rowspan="4">OH2</td>
        <td rowspan="2">武汉滨会生物科技股份有限公司</td>
        <td rowspan="3">牛痘病毒</td>
        <td>Pexa-vec</td>
        <td>Jennerex Biotherapeutics</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td>GL-ONC1</td>
        <td>Genelux Corporation</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td rowspan="2">泰州厚德奥科科技有限公司</td>
        <!-- <td></td> -->
        <td>vvDD-CDSR</td>
        <td>David Bartlett</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td>呼肠孤病毒</td>
        <td>Reolysin</td>
        <td>Ontolytics Biotech</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <td rowspan="2">OrienX010</td>
        <td rowspan="2">北京奥源和力生物技术有限公司</td>
        <td>柯萨奇病毒</td>
        <td>Cavatak</td>
        <td>Viralytics</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td>逆转录病毒载体</td>
        <td>Toca 511</td>
        <td>Tocagen Inc.</td>
      </tr>
      <tr>
        <td rowspan="2">牛痘病毒</td>
        <td rowspan="2">TG6002</td>
        <td rowspan="2">天士力</td>
        <td>——</td>
        <td>ASP9801*</td>
        <td>Astellas Pharma Global Development, Inc.</td>
      </tr>
      <tr>
        <!-- <td></td> -->
        <!-- <td></td> -->
        <!-- <td></td> -->
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

    <table border="1" cellpadding="0" cellspacing="0" width="100%" class="table-inner">
      <tr>
        <td class="title" colspan="3">国内</td>
        <td class="title" colspan="3">国外</td>
      </tr>
      <tr>
        <td>病毒种类</td>
        <td>病毒名称</td>
        <td>公司</td>
        <td>病毒种类</td>
        <td>病毒名称</td>
        <td>公司</td>
      </tr>
      <tr v-for="(item, index) in tableData" :key="index">
        <td v-if="internalData[index] ? internalData[index].virusTypeRowspan : 0" :rowspan="internalData[index].virusTypeRowspan">{{internalData[index].virusType}}</td>
        <td v-if="internalData[index] ? internalData[index].virusNameRowSpan : 0" :rowspan="internalData[index].virusNameRowSpan">{{internalData[index].virusName}}</td>
        <td v-if="internalData[index] ? internalData[index].virusCompanyRowSpan : 0" :rowspan="internalData[index].virusCompanyRowSpan">{{internalData[index].virusCompany}}</td>
        <td v-if="item.virusTypeRowspan" :rowspan="item.virusTypeRowspan">{{item.virusType}}</td>
        <td v-if="item.virusNameRowSpan" :rowspan="item.virusNameRowSpan">{{item.virusName}}</td>
        <td v-if="item.virusCompanyRowSpan" :rowspan="item.virusCompanyRowSpan">{{item.virusCompany}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
const internal = [
  {
    nation: '国内',
    virusType: '腺病毒',
    virusTypeRowspan: 6,
    virusName: 'H101、H103',
    virusNameRowSpan: 1,
    virusCompany: '上海三维生物技术有限公司',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '国内',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'KH901',
    virusNameRowSpan: 1,
    virusCompany: '成都康弘生物技术有限公司',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '国内',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'ADV-TK',
    virusNameRowSpan: 2,
    virusCompany: '深圳市天达康基因工程有限公司',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '国内',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'ADV-TK',
    virusNameRowSpan: 0,
    virusCompany: '达康生物技术有限公司',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '国内',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'EDS01',
    virusNameRowSpan: 1,
    virusCompany: '成都恩多施生物工程技术有限公司',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '国内',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'E10A',
    virusNameRowSpan: 1,
    virusCompany: '广州Double Bioproducts Co., Ltd',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '国内',
    virusType: '单纯疱疹病毒',
    virusTypeRowspan: 4,
    virusName: 'T3011',
    virusNameRowSpan: 1,
    virusCompany: '深圳市亦诺微医药科技有限公司',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '国内',
    virusType: '单纯疱疹病毒',
    virusTypeRowspan: 0,
    virusName: 'OH2',
    virusNameRowSpan: 2,
    virusCompany: '武汉滨会生物科技股份有限公司',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '国内',
    virusType: '单纯疱疹病毒',
    virusTypeRowspan: 0,
    virusName: 'OH2',
    virusNameRowSpan: 0,
    virusCompany: '泰州厚德奥科科技有限公司',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '国内',
    virusType: '单纯疱疹病毒',
    virusTypeRowspan: 0,
    virusName: 'OrienX010',
    virusNameRowSpan: 1,
    virusCompany: '北京奥源和力生物技术有限公司',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '国内',
    virusType: '牛痘病毒',
    virusTypeRowspan: 1,
    virusName: 'TG6002',
    virusNameRowSpan: 1,
    virusCompany: '天士力',
    virusCompanyRowSpan: 1,
  }, // 额外加入空，为了填满table
  {
    nation: '',
    virusType: '',
    virusTypeRowspan: 1,
    virusName: '',
    virusNameRowSpan: 1,
    virusCompany: '',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '',
    virusType: '',
    virusTypeRowspan: 1,
    virusName: '',
    virusNameRowSpan: 1,
    virusCompany: '',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '',
    virusType: '',
    virusTypeRowspan: 1,
    virusName: '',
    virusNameRowSpan: 1,
    virusCompany: '',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '',
    virusType: '',
    virusTypeRowspan: 1,
    virusName: '',
    virusNameRowSpan: 1,
    virusCompany: '',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '',
    virusType: '',
    virusTypeRowspan: 1,
    virusName: '',
    virusNameRowSpan: 1,
    virusCompany: '',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '',
    virusType: '',
    virusTypeRowspan: 1,
    virusName: '',
    virusNameRowSpan: 1,
    virusCompany: '',
    virusCompanyRowSpan: 1,
  },
  {
    nation: '',
    virusType: '',
    virusTypeRowspan: 1,
    virusName: '',
    virusNameRowSpan: 1,
    virusCompany: '',
    virusCompanyRowSpan: 1,
  },
  ,{
    nation: '',
    virusType: '',
    virusTypeRowspan: 1,
    virusName: '',
    virusNameRowSpan: 1,
    virusCompany: '',
    virusCompanyRowSpan: 1,
  }
  ,{
    nation: '',
    virusType: '',
    virusTypeRowspan: 1,
    virusName: '',
    virusNameRowSpan: 1,
    virusCompany: '',
    virusCompanyRowSpan: 1,
  }
  ,{
    nation: '',
    virusType: '',
    virusTypeRowspan: 1,
    virusName: '',
    virusNameRowSpan: 1,
    virusCompany: '',
    virusCompanyRowSpan: 1,
  }
]
const nation = [
  {
    nation: '国外',
    virusType: '腺病毒',
    virusTypeRowspan: 10,
    virusName: 'DNX-2401',
    virusNameRowSpan: 1,
    virusCompany: 'DNAtrix, Inc',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'ONCOS-102',
    virusNameRowSpan: 1,
    virusCompany: 'Targovax Oy ',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'Telomelysin (OBP-301)',
    virusNameRowSpan: 1,
    virusCompany: 'Oncolys BioPharma Inc',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'CG0070',
    virusNameRowSpan: 1,
    virusCompany: 'Cold Genesys, Inc.',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'VCN-01',
    virusNameRowSpan: 1,
    virusCompany: 'VCN Biosciences, S.L.',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'Onyx-015',
    virusNameRowSpan: 1,
    virusCompany: 'Onyx Pharmacceuticals',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'ICOVIR5',
    virusNameRowSpan: 1,
    virusCompany: 'Institut Català d Oncologia',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'Enadenotucirev(Colo-Adi）',
    virusNameRowSpan: 1,
    virusCompany: 'PsiOxus Therapeutics Ltd',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'MG1-MAGEA3',
    virusNameRowSpan: 1,
    virusCompany: 'Turnstone Biologics, Inc.',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '腺病毒',
    virusTypeRowspan: 0,
    virusName: 'ProstAtak',
    virusNameRowSpan: 1,
    virusCompany: 'Advantagene, Inc.',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '单纯疱疹病毒',
    virusTypeRowspan: 4,
    virusName: 'T-VEC',
    virusNameRowSpan: 1,
    virusCompany: 'Amgen',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '单纯疱疹病毒',
    virusTypeRowspan: 0,
    virusName: 'HF10',
    virusNameRowSpan: 1,
    virusCompany: 'Takara Bio Inc.',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '单纯疱疹病毒',
    virusTypeRowspan: 0,
    virusName: 'HSV1716',
    virusNameRowSpan: 1,
    virusCompany: 'Timothy Cripe; Pediatric Brain Tumor Consortium',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '单纯疱疹病毒',
    virusTypeRowspan: 0,
    virusName: 'G207',
    virusNameRowSpan: 1,
    virusCompany: 'Medigene',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '牛痘病毒',
    virusTypeRowspan: 3,
    virusName: 'Pexa-vec',
    virusNameRowSpan: 1,
    virusCompany: 'Jennerex Biotherapeutics',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '牛痘病毒',
    virusTypeRowspan: 0,
    virusName: 'GL-ONC1',
    virusNameRowSpan: 1,
    virusCompany: 'Genelux Corporation',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '牛痘病毒',
    virusTypeRowspan: 0, // 0表示td元素隐藏
    virusName: 'vvDD-CDSR',
    virusNameRowSpan: 1,
    virusCompany: 'David Bartlett',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '呼肠孤病毒',
    virusTypeRowspan: 1,
    virusName: 'Reolysin',
    virusNameRowSpan: 1,
    virusCompany: 'Ontolytics Biotech',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '柯萨奇病毒',
    virusTypeRowspan: 1,
    virusName: 'Cavatak',
    virusNameRowSpan: 1,
    virusCompany: 'Viralytics',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '逆转录病毒载体',
    virusTypeRowspan: 1,
    virusName: 'Toca 511',
    virusNameRowSpan: 1,
    virusCompany: 'Tocagen Inc.',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '——',
    virusTypeRowspan: 1,
    virusName: 'ASP9801*',
    virusNameRowSpan: 1,
    virusCompany: 'Astellas Pharma Global Development, Inc.',
    virusCompanyRowSpan: 1
  },
  {
    nation: '国外',
    virusType: '',
    virusTypeRowspan: 1,
    virusName: '',
    virusNameRowSpan: 1,
    virusCompany: '',
    virusCompanyRowSpan: 1
  }
]
import customBtn from '@/components/CustomBtn/index'
export default {
  name: 'infoCard',
  components: { customBtn },
  data () {
    return {
      internalData: internal,
      nationData: nation,
      tableData: []
    }
  },
  methods: {
    handleStatistics () {
      console.log('handleStatistics')
    },
    getCount (data, rawData, fieldName) {
      let count = 0
      for (const item of rawData) {
        if (data == item[fieldName]) {
          count++
        }
      }
      console.log('count=======', count)
      return count
    }
  },
  mounted () {
    this.tableData = this.internalData.length > this.nationData.length ? this.internalData : this.nationData
    console.log('tableData', this.tableData)
    console.log('internalData', this.internalData)
    console.log('nationData', this.nationData)
  }
}
</script>
<style lang="scss" scoped>
.realinfo-card-container {
  width: 1200px;
  margin: 0 auto;
  padding: 32px 0px 88px 0px;
  /deep/ .a-btn-container .btn-pattern {
    width: 132px;
    height: 37px;
    font-size: 14px;
    color: #555;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.21);
  }
  .table-inner {
    margin-top: 32px;
    tr {
      border: 1px solid #E7E7E7;
    }
    td {
      border: 1px solid #E7E7E7;
      padding: 0px 20px;
      font-size: 14px;
      color: #555;
      white-space: nowrap;
    }
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #555;
    }
  }
}
</style>